<template>
	<div class="acti_container">
		<div class="acti_nav">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ name: 'activity' }">活动报名中心</el-breadcrumb-item>
			  <el-breadcrumb-item>{{this.activity.title}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="acti_article"  v-loading="isLoad">
			<h3>{{this.activity.title}}</h3>
			<p class="acti_author">
				<span>发布时间：{{this.activity.releaseTime}}</span>

			</p>
			<p class="acti_author">
				<span>结束时间：{{this.activity.endTime}}</span>
			</p>
			<div class="acti_intro">
				<p>{{this.activity.intro}}
				</p>
				<img src="../../assets/activity.jpg" max-width="100%" width="100%">
			</div>
			<div class="acti_detail">
				<h4>活动详情</h4>
				<div>
					<p>活动内容：{{this.activity.content}}</p>
					<p>活动地点：{{this.activity.place}}</p>
				</div>
			</div>
			<div class="acti_request">
				<h4>报名要求</h4>
				<div>
					<p>{{this.activity.request}}</p>
				</div>
			</div>
			<div class="submit_btn">
				<router-link :to="{name: 'activitySign'}"><el-button type="primary" size="large" @click="signUp()">立刻报名</el-button></router-link>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'activityDel',
		data(){
			return {
				activity:{},
				isLoad: true,
			}
		},
		methods: {
			getActivity: function(){
				this.$http({
				  method: 'get',
				  url: '/activity/'+this.$route.params.id
				}).then((response)=>{
				    if(response.data && response.data.status === 'SUCCESS'){
						const { object } = response.data;
						this.activity = object;
						this.isLoad = false;
				    }
				})
				.catch(function (error) {
				   console.log(error);
				});
			},
			signUp: function(){
				this.$router.push({
					name: 'activitySign',
					params: {
						activity:this.activity
					}
				})
			}
		},
		created: function(){
			this.getActivity();
		}
	}
</script>
<style scoped>
	.acti_container {
		width: 80%;
		margin: 20px auto;
	}
	.acti_nav {
		margin: 10px;
		font-size: 1.5rem!important;
	}
	.acti_article{
		margin: 10px auto;
		padding: 10px;
	}
	.acti_article h3{
		text-align: center;
	}
	.acti_author {
		margin-top:20px;
		text-align: right;
		color: #9b8989;
	}
	.acti_author span{
		margin: 10px;
	}
	.acti_intro {
		margin: 40px auto;
	}
	.acti_detail {
		padding: 10px;
	}
	.acti_detail h4:before {
		content: url('../../assets/activityLogo.png');
		width: 100px;
	}
	.acti_detail div {
		padding: 30px;
	}
	.acti_detail p {
		line-height: 3.0rem;
	}
	.acti_request h4:before{
		content: url('../../assets/activityLogo.png');
		width: 100px;
	}
	.acti_request div {
		padding: 30px;
	}
	.submit_btn {
		text-align: center;
	}
</style>